<template>
  <div id="app">
    <div id="nav">
      <div id="footer">
        <router-link to="/shouye"><span class="iconfont icon-shouye"></span>首页</router-link>
        <router-link to="/shuyin"><span class="iconfont icon-shu"></span>书影音</router-link>
        <router-link to="/xiaozu"><span class="iconfont icon-wangluo"></span>小组</router-link>
        <router-link to="/shiji"><span class="iconfont icon-ic_market"></span>市集</router-link>
        <router-link to="/wo"><span class="iconfont icon-wode"></span>我</router-link>
      </div>
    </div>
    <router-view/>
  </div>
</template>

<style>
  html{font-size: 24.155vw;}
  body{font-size: .16rem;}
  *{
    margin: 0;
    padding: 0;
  }
  #nav a{
    color: black;
    text-decoration: none;
  }

  #footer{
    width: 100%;
    height: .54rem;
    position: fixed;
    bottom: -.05rem;
    border-top: .02rem solid #ececec;
    background-color: #ffffff;
    z-index: 10;
  }
  #footer a{
    display: block;
    width: 20%;
    height: 100%;
    float: left;
    text-align: center;
  }
  #footer a span{
    display: flex;
    width: 100%;
    height: 50%;
    justify-content: center;
    align-items: flex-end;
    font-size: .24rem;
  }
  #footer a.router-link-exact-active{
    color: #06bb00;
  }
</style>
